<template>
	<div class="">
		<van-image width="100" height="100" :src="user.avatar" />
		<p>{{user.name}}</p>
		<p>得分：{{answer_reslut.point}}</p>
		<p>用时：{{answer_reslut.user_time}}</p>
		<router-link :to="{name: 'Index'}"><van-button type="default">重新答题</van-button></router-link>
		<router-link :to="{name: 'DatiRank'}"><van-button type="primary">查看排行</van-button></router-link>
    
    <van-overlay :show="show" >
      <div class="wapp">
      <LuckDraw
      v-model="currIndex"
      :awards="awards"
      @start="handleStart"
      @end="handleEnd"
      />
      </LuckDraw>
      </div>
    </van-overlay>

	</div>
</template>
<script>
import { getResultInfo } from '@/api/user'
export default {
    data() {
        return {
            id: 0,
            info: this.$store.state.acc,
            user: this.$store.state.user,
            answer_reslut: this.$store.state.answer_reslut,
            currIndex: 0, // 奖品的索引
            awards: [     // 奖品
                { name: '谢谢参与', color: '#f8d384' },
                { name: '1元红包', color: '#f9e3bb' },
                { name: '2元红包', color: '#f8d384' },
                { name: '3元红包', color: '#f9e3bb' }
            ],
            show: false
        }
    },

    created(e) {
      
      this.id = this.$route.params.id
      console.log(this.id)
    	this.getInfo()
      // console.log(LuckDraw)
    },
    methods: {
    	getInfo (){
    		this.$toast.loading({
		      message: '加载中...',
		      forbidClick: false,
		      loadingType: 'spinner',
		      duration: 10000
		    });
        let id = this.answer_reslut.id
        if(!id)id = this.id
    		getResultInfo({id: id}).then(res=> {
    			this.$toast.clear()
    			this.answer_reslut = res.result
          if(this.info.is_redbag == 1 && res.result.point >= this.info.send_redbag_point) {
            if(res.redbag.status == 1) {
              this.currIndex = res.redbag.info.total_amount/100
              if(this.awards[this.currIndex]) {
                this.show = true
              }else{
                this.$toast('系统错误请稍后再试');
              }
              
            }else{
              this.$toast(res.redbag.msg);
            }
          }else if(this.info.is_redbag == 1) {
            this.$toast('请再接再厉，只有得分' + this.info.send_redbag_point + '分,才能抽奖哦！');
          }
    		})
    	},
      handleStart () {
        console.log('开始抽奖 ')
      },
      handleEnd (index) {
        if(this.currIndex == 0) {
          this.$dialog.alert({
            message: '感谢参与，请明日再来',
          }).then(res=>{
            this.show = false
          })
        }else {
          this.$dialog.alert({
            message: '恭喜您，抽得' + this.awards[this.currIndex].name,
            confirmButtonText: '立刻领奖'
          }).then(res=>{
            this.show = false
            this.$router.push({name: 'DatiRebbag'})
          })
        }
        
      }
    }
}
</script>
<style>
.wapp{
    position: relative;
    top: 20%;
    margin: 20px auto;
    width:360px;
}
.wapp canvas{ margin: 0 auto;}
</style>